<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="~{doc:lessons/clientsidefiltering/documentation/ClientSideFiltering_plan.adoc}"></div>
</div>
<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="~{doc:lessons/clientsidefiltering/documentation/ClientSideFiltering_assignment.adoc}"></div>

    <br/>

    <div class="attack-container">
        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>
        <input type="hidden" id="user_id" value="102"/>
        <!-- using attack-form class on your form, will allow your request to be ajaxified and stay within the display framework for webgoat -->
        <form class="attack-form" accept-charset="UNKNOWN" method="POST" name="form"
              action="clientSideFiltering/attack1">
            <link rel="stylesheet" type="text/css"
                  th:href="@{/lesson_css/clientSideFiltering-stage1.css}"/>
            <script th:src="@{/lesson_js/clientSideFiltering.js}"
                    language="JavaScript"></script>
            <input id="userID" value="101" name="userID" type="HIDDEN"/>
            <div id="lesson_wrapper">
                <div id="lesson_header"></div>
                <div class="lesson_workspace"><br/><br/>
                    <p>Select user: <select id="UserSelect" onfocus="fetchUserData()" name="UserSelect"
                                            onchange="selectUser()">
                        <option value="0" label="Choose Employee">Choose Employee</option>
                        <option value="101" label="Larry Stooge">Larry Stooge</option>
                        <option value="103" label="Curly Stooge">Curly Stooge</option>
                        <option value="104" label="Eric Walker">Eric Walker</option>
                        <option value="105" label="Tom Cat">Tom Cat</option>
                        <option value="106" label="Jerry Mouse">Jerry Mouse</option>
                        <option value="107" label="David Giambi">David Giambi</option>
                        <option value="108" label="Bruce McGuirre">Bruce McGuirre</option>
                        <option value="109" label="Sean Livingston">Sean Livingston</option>
                        <option value="110" label="Joanne McDougal">Joanne McDougal</option>
                    </select></p>
                    <p></p>
                    <table style="display: none" id="hiddenEmployeeRecords" align="center" border="1"
                           cellpadding="2"
                           cellspacing="0" width="90%">
                        <div>
                        </div>
                    </table>
                    <table align="center" border="1" cellpadding="2" cellspacing="0" width="90%">
                        <tbody>
                        <tr>
                            <td>User ID</td>
                            <td>First Name</td>
                            <td>Last Name</td>
                            <td>SSN</td>
                            <td>Salary</td>
                        </tr>
                        <tr id="employeeRecord"></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <table cellpadding="2" cellspacing="0">
                <tbody>
                <tr>
                    <td>What is Neville Bartholomew's salary?</td>
                    <td><input id="answer" name="answer" value="" type="TEXT"/></td>
                    <td align="LEFT"><input name="SUBMIT" value="Submit Answer" type="SUBMIT"/></td>
                </tr>
                </tbody>
            </table>
        </form>
        <!-- do not remove the two following div's, this is where your feedback/output will land -->
        <div class="attack-feedback"></div>
        <div class="attack-output"></div>
        <!-- ... of course, you can move them if you want to, but that will not look consistent to other lessons -->
    </div>
</div>
<div class="lesson-page-wrapper">
    <div class="adoc-content" th:replace="~{doc:lessons/clientsidefiltering/documentation/ClientSideFiltering_final.adoc}"></div>
    <link rel="stylesheet" type="text/css" th:href="@{/lesson_css/clientSideFilteringFree.css}"/>
    <script th:src="@{/lesson_js/clientSideFilteringFree.js}" language="JavaScript"></script>
    <div class="attack-container">
        <div class="assignment-success"><i class="fa fa-2 fa-check hidden" aria-hidden="true"></i></div>

        <div class="container-fluid">
            <form class="attack-form" accept-charset="UNKNOWN"
                  method="POST" name="form"
                  action="clientSideFiltering/getItForFree">

                <input id="discount" type="hidden" value="0"/>
                <div class="row">

                    <div class="col-xs-3 item-photo">
                        <img style="max-width:100%;" th:src="@{/images/samsung-black.jpg}"/>
                    </div>
                    <div class="col-xs-5" style="border:0px solid gray">
                        <h3>Samsung Galaxy S8</h3>
                        <h5 style="color:#337ab7"><a href="http://www.samsung.com">Samsung</a> ·
                            <small style="color:#337ab7">(124421 reviews)</small>
                        </h5>

                        <h6 class="title-price">
                            <small>PRICE</small>
                        </h6>
                        <h3 style="margin-top:0px;"><span>US $</span><span id="price">899</span></h3>

                        <div class="section">
                            <h6 class="title-attr" style="margin-top:15px;">
                                <small>COLOR</small>
                            </h6>
                            <div>
                                <div class="attr" style="width:25px;background:lightgrey;"></div>
                                <div class="attr" style="width:25px;background:black;"></div>
                            </div>
                        </div>
                        <div class="section" style="padding-bottom:5px;">
                            <h6 class="title-attr">
                                <small>CAPACITY</small>
                            </h6>
                            <div>
                                <div class="attr2">64 GB</div>
                                <div class="attr2">128 GB</div>
                            </div>
                        </div>
                        <div class="section" style="padding-bottom:5px;">
                            <h6 class="title-attr">
                                <small>QUANTITY</small>
                            </h6>
                            <div>
                                <div class="btn-minus"><span class="glyphicon glyphicon-minus"></span></div>
                                <input class="quantity" value="1"/>
                                <div class="btn-plus"><span class="glyphicon glyphicon-plus"></span></div>
                            </div>
                        </div>

                        <div class="section" style="padding-bottom:5px;">
                            <h6 class="title-attr">
                                <small>CHECKOUT CODE</small>
                            </h6>
                            <!--
                              Checkout code: webgoat, owasp, owasp-webgoat
                            -->
                            <input name="checkoutCode" class="checkoutCode" value=""/>

                        </div>

                        <div class="section" style="padding-bottom:20px;">
                            <button type="submit" class="btn btn-success"><span style="margin-right:20px"
                                                                                class="glyphicon glyphicon-shopping-cart"
                                                                                aria-hidden="true"></span>Buy
                            </button>
                            <h6><a href="#"><span class="glyphicon glyphicon-heart-empty"
                                                  style="cursor:pointer;"></span>
                                Like</a></h6>
                        </div>
                    </div>
                </div>

            </form>
        </div>
        <br/>
        <br/>
        <div class="attack-feedback"></div>
        <div class="attack-output"></div>
    </div>
</div>

</html>
